<template>
  <div>
    <van-nav-bar title="搜索中心" left-arrow @click-left="$router.back()" />
    <van-search
      v-model.trim="keyword"
      show-action
      placeholder="请输入搜索关键词"
      @clear="click_clear"
      @search="onSearch"
      @input="hGetSuggestion_with_jie_liu"
    >
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
    </van-search>
    <van-cell-group v-if="keyword">
      <van-cell
        v-for="(item, index) in cSuggestion"
        :key="index"
        @click="hSearchSyggestion(index)"
        icon="search"
      >
        <div v-html="item"></div>
      </van-cell>
      <!-- <van-cell title="jsa" icon="search" /> -->
    </van-cell-group>
    <van-cell-group v-else>
      <van-cell title="历史记录"> </van-cell>
      <van-cell
        v-for="(item, idx) in history"
        :key="idx"
        :title="item"
        @click="$router.push(`/search/result?keyword=${item}`)"
      >
        <van-icon name="close" @click.stop="hDeleteHistory(idx)"></van-icon>
        <!-- history.splice(idx,1) -->
      </van-cell>
    </van-cell-group>
  </div>
</template>

<script>
import { setItem, getItem } from '@/utils/storage';
export default {
  name: 'Search',
  data () {
    return {
      // 搜索的美容
      keyword: '',
      // 搜索的结果
      suggestion: [],
      // 保存历史搜索记录
      history: getItem('searchHistory') || []
    };
  },
  computed: {
    // 匹配搜到的的内容
    cSuggestion () {
      // 根据keyword,对Suggestion 中的每一项进行正则替换，达到高亮的效果
      // -------搜索内容高亮实现----------
      // 1、动态接受搜索信息 ，并设置校验规则
      const regexp = new RegExp(this.keyword, 'gi');
      // 2、使用map 遍历出每一项
      const arr = this.suggestion.map((str) => {
        // 3、使用replace 进行替换
        return str.replace(regexp, (obj) => {
          console.log('搜索替换', obj);
          // 输出替换的结果
          return `<span style="color:red">${obj}</span>`;
        });
      });
      // 输出 执行玩的结果
      return arr;
    }
  },
  created () {
    this.getHistories();
  },
  methods: {
    // 删除搜索历史记录
    hDeleteHistory (idx) {
      this.history.splice(idx, 1);
      setItem('searchHistory', this.history);
    },
    // 搜索建议第一种方式
    // 用户在搜索建议项上 点击了一次
    hSearchSyggestion (idx) {
      console.log('so111', this.suggestion[idx]);
      // 1、把当前的搜索建议添加到搜索记录中
      this.addHistory(this.suggestion[idx]);
      // 2、跳转路由，进入搜索结果页面
      this.$router.push({
        // 跳转到路由地址
        path: '/search/result',
        // 通过query传递参数
        query: {
          keyword: this.suggestion[idx]
        }
      });
    },
    // hSearchSyggestion (idx) {
    //   console.log('添加到搜索记录',this.suggestion([idx])
    //   // 1、把当前的搜索建议添加到搜索记录中
    //   // this.addHistory()
    // },
    // 搜索的记录中添加新项
    // 搜索记录的本规则
    // 1、不能有重复项
    // 2、最近的搜索记录放在最前面
    addHistory (str) {
      console.log('调用addHistory', str, '加入到搜索记录中');
      // todo...
      // 历史的记录是一个数组，但 不应该出现重复项
      const idx = this.history.findIndex((it) => it === str);
      if (idx !== -1) {
        // 说明历史记录中存在这一项
        // 应该删掉
        this.history.splice(idx, 1);
      }
      // 把当前添加的内容放在最前面
      // unshift在数组的最前面添加 push是在最后追加
      this.history.unshift(str);
      // 对更新后的历史记录进行本地历史记录
      setItem('searchHistory', this.history);
    },
    // 点击清空搜搜索
    click_clear () {
      this.suggestion = [];
    },
    // 节流处理
    hGetSuggestion_with_jie_liu () {
      console.log(
        'hGetSuggestion_with_jie_liu',
        new Date().toLocaleTimeString(),
        this.keyword
      );
      // 节流5秒
      // 如果这个函数被调用 检查距离上一次被调用的时间是否相隔5秒 就执行 否则本次调用不执行
      // 执行代码
      // 两次执行的时间 注销相隔5秒
      if (this.timer) {
        // console.log('retuen', this.timer);
        return console.log('retuen', this.timer);
      }
      this.timer = setTimeout(() => {
        this.timer = null;
        // 1、检测输入的内容不能为空
        if (this.keyword === '') {
          // 搜索框为空 清空 搜索内容
          this.suggestion = [];
          return;
        }
        // 2、调用方法 发送请求
        this.api
          .search({ q: this.keyword })
          .then((res) => {
            console.log('节流请求', res);
            // 3、 把请求的结果保存到数据项
            this.suggestion = res.data.data.options;
          })
          .catch((err) => {
            console.log(err);
          });
      }, 1 * 1000);
      console.log(this.timer);
    },
    // 防抖搜索
    hGetSuggestion_with_fang_dou () {
      //  防抖五秒为例
      // 当这个函数被调用时5秒后被执行，如果被打断，将再次被执行从新计时
      if (this.timer) {
        clearTimeout(this.timer);
      }
      this.timer = setTimeout(() => {
        // 1、检测输入的内容不能为空
        if (this.keyword === '') {
          // 搜索框为空 清空 搜索内容
          this.suggestion = [];
          return;
        }
        // 2、调用方法 发送请求
        this.api
          .search({ q: this.keyword })
          .then((res) => {
            console.log('00', res);
            // 3、 把请求的结果保存到数据项
            this.suggestion = res.data.data.options;
          })
          .catch((err) => {
            console.log(err);
          });
      }, 0.5 * 1000);
      console.log('this.timer倒计时', this.timer);
    },
    // 输入搜索
    hGetSuggestion () {
      console.log('我是搜索的内容', this.keyword);
      // 1、检测输入的内容不能为空
      if (this.keyword === '') {
        // 搜索框为空 清空 搜索内容
        this.suggestion = [];
        return;
      }
      // 2、调用方法 发送请求
      this.api
        .search({ q: this.keyword })
        .then((res) => {
          console.log('00', res);
          // 3、 把请求的结果保存到数据项
          this.suggestion = res.data.data.options;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 用户点击搜索按钮
    onSearch () {
      console.log('点击搜搜');
      if (this.keyword === '') {
        return;
      }
      // 1、把当前的搜索建议添加到搜索记录中
      this.addHistory(this.keyword);
      // 2、跳转路由，进入搜索结果页面
      this.$router.push({
        // 跳转到路由地址
        path: '/search/result',
        // 通过query传递参数
        query: {
          keyword: this.keyword
        }
      });
      // var str = 'abcdefABgbefab';
      // var keyword = 'ab';
      // // var regexp = /b/g // 定义一个正则表达式
      // var regexp = new RegExp(keyword, 'gi');
      // -g：表示全局匹配
      // -i: 忽略大小写
      // console.log( str.replace(/b/g,'<span>b</span>') )
      // 输出结果：a<span>b</span>cdefg<span>b</span>efa<span>b</span>
      // 它确实是实现了全局匹配：所有的b全部替换了

      // replace (正则，函数)
      // 格式：
      // str.replace(正则表达式, function(obj) {
      //  return xxxx
      // })
      // 函数的执行细节:
      // obj：是表示当前匹配到的内容
      // return的值，就表示要替换之后的内容
      // var newStr = str.replace(regexp, function (obj) {
      //   console.log(obj);
      //   return `<span style="color:green;">${obj}</span>`;
      // });
      // console.log(newStr);
      // var s = 'abcbeb';
      // var key = 'b';
      // var regexps = new RegExp(key, 'gi');
      // var bb = s.replace(regexps, function (obj) {
      //   return `<span>${obj}</span>`;
      // });
      // console.log('resplace', bb);
    },
    //  获取搜索历史记录
    async getHistories () {
      const res = await this.api.histories();
      console.log('历史记录', res);
    }
  }
};
</script>

<style>
</style>
